import React, {
    useEffect,
    useRef,
} from 'react';
import { Chart } from '@antv/g2';

const G22 = () => {
    // 使用 useRef 创建一个 ref 对象，用于获取 DOM 节点
    const chartRef = useRef<Chart>();

    useEffect(() => {
        // 初始化图表实例
        chartRef.current = new Chart({
            container: 'waterDroplets',
            autoFit: true,
        });

        // 配置并绘制图表
        chartRef.current.liquid().data(0.581).style({
            shape: 'circle', // 内置形状: rect, circle, pin, diamond, triangle.
            contentFill: '#fff',
            outlineBorder: 4,
            outlineDistance: 8,
            waveLength: 128,
            textFontSize: 12,
        });
        console.log(chartRef)
        // 渲染图表
        chartRef.current.render();

        // 在组件卸载时销毁图表
        return () => {
            chartRef.current?.destroy();
        };
    }, []); // 空依赖数组确保此 effect 只执行一次

    return (
        <div id="waterDroplets" style={{ height: '180px',width: '180px',position: 'absolute',top:'50%',right: '0',transform: 'translateY(-50%)' }}></div>
    );
};

export default G22;
